<template>
    <div class="container">
        <div class="condition-box">
            <el-row>
            <el-form :model="condition" class="demo-form-inline" size="mini">
                <el-col span="4">
                <el-form-item label="订单编号" label-width="70px">
                    <el-input v-model="condition.oderid" placeholder="订单编号" clearable size="mini"></el-input>
                </el-form-item>
                </el-col>
                <el-col span="4">
                <el-form-item label="开始时间" prop="startTime" label-width="70px">
                    <el-date-picker v-model="condition.startTime" size="mini" clearable placeholder="请输入" value-format="yyyy-MM-dd"></el-date-picker>
                </el-form-item>
                </el-col>
                <el-col span="15">
                    <el-form-item label="订单状态" prop="startTime" label-width="70px">
                        <el-select v-model="condition.status" clearable placeholder="请选择订单状态" size="mini">
                            <el-option
                                    v-for="s in states"
                                    :key="s.value"
                                    :label="s.text"
                                    :value="s.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col span="4">
                <el-form-item label="结束时间" prop="finishTime" label-width="70px">
                    <el-date-picker v-model="condition.finishTime" size="mini" clearable placeholder="请输入" value-format="yyyy-MM-dd"></el-date-picker>
                </el-form-item>
                </el-col>
                <el-col span="4">
                <el-form-item label="用户名" prop="orderUser" label-width="70px"class="item">
                    <el-input v-model="condition.orderUser" size="mini" clearable placeholder="请输入姓名"></el-input>
                </el-form-item>
                </el-col>
                <el-col span="4">
                    <el-form-item label="处理人" prop="orderAdmin" label-width="70px"class="item">
                        <el-input v-model="condition.orderAdmin" size="mini" clearable placeholder="请输入姓名"></el-input>
                    </el-form-item>
                </el-col>
                <el-col span="4">
                <el-button type="primary" @click="search" size="mini">查询</el-button>
                <el-button @click="reset" size="mini">重置</el-button>
                <el-button type="danger" @click="addOrder" size="mini">新增</el-button>
                </el-col>
            </el-form>
            </el-row>
        </div>
        <div class="tablef">
                <el-table :data="tableData" height="400px" border size="mini"  style="width: 100%; text-align: center;" >
                    <el-table-column prop="oderid" label="订单编号"> </el-table-column>
                    <el-table-column prop="startTime" label="开始时间"></el-table-column>
                    <el-table-column prop="finishTime" label="结束时间"> </el-table-column>
                    <el-table-column prop="orderUser" label="用户名"></el-table-column>
                    <el-table-column prop="houseid" label="房屋id"></el-table-column>
                    <el-table-column prop="orderAdmin" label="处理管理员"> </el-table-column>
                    <el-table-column label="操作"  width="200">
                        <template slot-scope="scope">
                            <el-button type="text" size="mini"  @click="editOrder(scope.row,1)">修改信息</el-button>
                            <el-button type="text" size="mini" v-show="scope.row.status == 1" @click="editOrder(scope.row,0)">过期</el-button>
                            <el-button type="text" size="mini" v-show="scope.row.status == 2" @click="editOrder(scope.row,2)">审核</el-button>
                        </template>
                    </el-table-column>

                </el-table>
        </div>
        <el-pagination small background
                       :page-sizes="[5,10,15,20]"
                       layout="total,sizes,prev,pager,next"
                       :current-page="currentPage"
                       :page-size="displayCount"
                       :total=total
                       @current-change="changeCurrentPage"
                       @size-change="changeSize"
        >
        </el-pagination>
        <el-dialog :title="title" :visible.sync="addvisible"
                   width="45%" @close="closeDialog">
            <el-form :model="add" :rules="orderRules" :inline="true" v-show="title=='新增'" label-position="left" size="mini">
                <el-form-item label="开始时间" prop="startTime" label-width="100px">
                    <el-date-picker v-model="add.startTime" size="mini" clearable placeholder="请输入" value-format="yyyy-MM-dd"></el-date-picker>
                </el-form-item>
                <el-form-item label="结束时间" prop="finishTime" label-width="100px">
                    <el-date-picker v-model="add.finishTime" size="mini" clearable placeholder="请输入" value-format="yyyy-MM-dd"></el-date-picker>
                </el-form-item>
                <el-form-item label="用户名" prop="orderUser" label-width="100px" class="item">
                    <el-input v-model="add.orderUser" size="mini" clearable placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="房屋id" prop="houseid" label-width="100px">
                    <el-input v-model.number="add.houseid" size="mini" clearable placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="每月租金" prop="money" label-width="100px">
                    <el-input v-model.number="add.money" size="mini" clearable placeholder="请输入"></el-input>
                </el-form-item>
            </el-form>
            <el-form :model="edit" :rules="orderRules" :inline="true" v-show="title=='修改'||title=='提前过期'||title=='订单审核'" label-position="left" size="mini">
                <el-form-item label="开始时间" prop="startTime" label-width="100px">
                    <el-date-picker v-model="edit.startTime" size="mini" clearable placeholder="请输入" value-format="yyyy-MM-dd" disabled></el-date-picker>
                </el-form-item>
                <el-form-item label="结束时间" prop="finishTime" label-width="100px">
                    <el-date-picker v-model="edit.finishTime" size="mini" clearable placeholder="请输入" value-format="yyyy-MM-dd"></el-date-picker>
                </el-form-item>
                <el-form-item label="用户名" prop="orderUser" label-width="100px">
                    <el-input v-model="edit.orderUser" size="mini" clearable placeholder="请输入" disabled></el-input>
                </el-form-item>
                <el-form-item label="房屋id" prop="houseid" label-width="100px">
                    <el-input v-model.number="edit.houseid" size="mini" clearable placeholder="请输入" disabled></el-input>
                </el-form-item>
                <el-form-item label="每月租金" prop="money" label-width="100px">
                    <el-input v-model.number="edit.money" size="mini" clearable placeholder="请输入"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="closeDialog" size="small">取 消</el-button>
                <el-button type="primary" @click="saveOrder" size="small">确 定</el-button>
            </div>
        </el-dialog>
    </div>

</template>
<script>
    import {oderAdd, oderUpdate, oderSearch} from "../../api/user";
    export default {
        data() {
            return {
                currentPage:1,
                displayCount:5,
                total:0,
                condition: {
                    oderid: null,
                    startTime:'',
                    finishTime:'',
                    orderUser:'',
                    orderAdmin:'',
                    status:null,
                    page:null,
                    limit:null,
                },
                states:[
                    {value:0,text:'过期订单'},
                    {value:1,text:'进行中'},
                    {value:2,text:'待审核'},

                ],
                title:'',
                addvisible:false,
                edit:{},
                add:{
                    oderid: null,
                    startTime:'',
                    finishTime:'',
                    orderUser:'',
                    orderAdmin:'',
                    houseid:'',
                    status: 1,
                    money:null,
                },
                orderRules:{
                    startTime: [
                        {required: true, message: '请输入', trigger: 'blur'},
                    ],
                    finishTime: [
                        {required: true, message: '请输入', trigger: 'blur'},
                    ],
                    orderUser: [
                        {required: true, message: '请输入', trigger: 'blur'},
                    ],
                    houseid: [
                        {required: true, message: '请输入', trigger: 'blur'},
                    ],
                    money: [
                        {required: true, message: '请输入', trigger: 'blur'},
                    ],
                },
                tableData: [],
                admin:{}
            }


        },
        mounted() {
            this.search()
            this.admin=JSON.parse(localStorage.getItem('admin'))
        },

        methods: {
            search(){
                this.condition.page=this.currentPage,
                    this.condition.limit=this.displayCount
                oderSearch(
                    this.condition,
                ).then((res)=>{
                    this.tableData = res.data;
                    this.total=res.count

                })
            },
            reset(){
                this.condition.oderid=null
                this.condition.start_time=''
                this.condition.finish_time=''
                this.condition.oder_admin=''
                this.condition.oder_user=''

            },
            closeDialog () {
                this.add={
                    oderid: null,
                    startTime:'',
                    finishTime:'',
                    orderUser:'',
                    orderAdmin:'',
                    houseid:'',
                    status: 1,
                    money:null,
                },
                    this.addvisible = false;
            },
            saveOrder(){
                if(this.title=='新增'){
                    this.add.orderAdmin=this.admin.adminname
                    oderAdd(
                        this.add
                    ).then((res)=>{
                        if(res.msg=='OK'){
                            this.$message.success('新增成功!')
                            this.addvisible=false;
                            this.search()
                        }else {this.$message.error(res.msg)}
                    })
                }else {
                    this.$confirm('订单操作！ 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(()=> {
                        oderUpdate(
                            this.edit
                        ).then((res)=>{
                            if(res.msg=='OK'){
                                this.$message.success('修改成功!')
                                this.addvisible=false;
                                this.search()
                            }else {this.$message.error('修改失败!')}
                        })
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消!'
                        });
                    });
                }
            },
            editOrder(order,state){
                this.addvisible=true;
                if(state==2){
                    this.edit.status=1
                    this.edit.orderAdmin=this.admin.adminname
                    this.title='订单审核'
                }else if(state==0){
                    this.title='提前过期'
                    this.edit.orderAdmin=this.admin.adminname
                    this.edit.status=0;
                }else {
                    this.title='修改'
                    this.edit={...order};
                }
                },
            addOrder(){
                this.title='新增'
                this.addvisible=true;
            },

            //当前页码改变触发
            changeCurrentPage(val){
                this.currentPage = val ;
                this.search();
            },
            //每页展示的记录数发生改变
            changeSize(val){
                this.displayCount = val ;
                this.search();
            },
        }
    }
</script>
<style scoped lang="less">
    .content-box{
        width: calc(100% - 10px);
        height: 100%;
    }
    .condition-box, .button-box{
        height: 40px;
        line-height: 40px;
        color: #909399;
        font-size: 12px;
        margin: 10px;
    }
    .item  {
        /deep/ .el-form-item__label {
            white-space: pre-wrap;
            text-align: center;
        }
    }
    .tablef {
        flex: 8.25;
        border-radius: 0px;
        box-shadow: rgba(0, 0, 0, 0.047) 0px 3px 5px;
    }
    .condition-box{
        color: #909399;
        font-size: 12px;
    }

    .el-pagination{
        height: 30px;
        padding-top: 10px;
    }
    .el-input, .el-select{
        width: 120px;
        margin-right: 10px;
    }
    .el-pagination .el-select .el-input > input{
        height: 22px;
    }

    .el-pagination > span{
        float: left;
    }

</style>